<template>
	<Box>
		<div id="m1_l1_ecs" />
	</Box>
</template>

<script setup>
	import Box from '@com1/Box.vue';
	import * as ecs from 'echarts';
	import { m1Store } from '@st/m1';
	import { onMounted } from 'vue';

	const m1 = m1Store();

	onMounted(() => {
		m1.getL1();
		const chart = ecs.init(document.getElementById('m1_l1_ecs'));
		chart.setOption({
			color: ['#E02020', '#147EFA'],
			title: {
				text: '七日交易金额及笔数',
				textStyle: { color: '#5A9CF8' },
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				boundaryGap: false,
				data: m1.l1.xData
			}],
			yAxis: [
				{ type: 'value', min: 30, max: 180 },
				{ type: 'value', min: 30, max: 180 },
			],
			legend: {
				data: ['交易', '盈利'],
				textStyle: { color: '#5A9CF8' },
				right: '0'
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					label: { backgroundColor: '#5A9CF8' }
				}
			},
			series: [{
				name: '交易',
				type: 'line',
				yAxisIndex: 0,
				data: m1.l1.jnyi
			}, {
				name: '盈利',
				type: 'line',
				yAxisIndex: 1,
				data: m1.l1.ykli
			}]
		})
	})
</script>

<style lang="less">
@import "@less";
#m1_l1_ecs {
	.size(100%, 300px);
}
</style>